<template>
	<!-- #ifndef APP-NVUE -->
	<view class="yb-tab-list yb-flex" style="overflow: visible;">
		<slot name="header"></slot>
		<view class="yb-tab-list-content yb-flex" :style="{
			'overflow': 'visible',
			'min-height': 'calc(100vh - ' + Util.pixelunit(optionsSync.top) + ')',
			'background-color': optionsSync.bgColor
		}">
			<yb-sticky
			:custom-style="{
				'background-color': optionsSync.bgColor
			}"
			:top="optionsSync.top">
				<slot name="top"></slot>
				<yb-tabs
				:customSlot="false"
				:column="optionsSync.column"
				:arrowShow="optionsSync.arrowShow"
				:current="currentSync"
				:hidden="hidden"
				:options="optionsSync"
				@change="onChange"
				:data="data">
					<template #right>
						<slot name="right"></slot>
					</template>
				</yb-tabs>
			</yb-sticky>
			<view class="yb-tab-list-wrapper yb-flex yb-flex-1">
				<slot :name="currentSync"></slot>
			</view>
			<!-- <view class="yb-tab-list-wrapper yb-flex yb-flex-1 yb-row"
			:prop="touchProp" :change:prop="touch.propWatcher"
			@touchstart="touch.touchstart"
			@touchmove="touch.touchmove"
			@touchend="touch.touchend"
			:style="{
				width: (data.length * 100) + 'vw',
				transform: 'translateX(' + ( -current * 100 ) +'vw)'
			}">
				<view class="yb-flex yb-flex-1" v-for="(item, index) in data" :key="item.value" :style="{
					width: '100vw'
				}">
					<slot :name="index"></slot>
				</view>
			</view> -->
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<list :bounce="bounce" id="yb-tab-list-scroller" :offsetAccuracy="offsetAccuracy" ref="ybTabListScroller" @[scrollEvent]="onScroll">
		<template v-if="isShow">
			<slot name="header"></slot>
			<header>
				<view class="yb-flex" :style="{
					'background-color': optionsSync.bgColor,
					'height': listHeight + 'px',
				}">
					<slot name="top"></slot>
					<yb-tabs
					@ready="onTabsReady"
					custom-class="yb-flex-1"
					:column="optionsSync.column"
					:arrowShow="optionsSync.arrowShow"
					:current="currentSync"
					:hidden="hidden"
					:options="optionsSync"
					@change="onChange"
					:data="data">
						<template #right>
							<slot name="right"></slot>
						</template>
						<view class="yb-flex yb-flex-1" v-for="(item, index) in data" :key="item.value" :slot="index">
							<slot :name="index"></slot>
						</view>
					</yb-tabs>
				</view>
			</header>
		</template>
	</list>
	<!-- #endif -->
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		name: 'YbTabList',
		mixins: [ComponentMixin],
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			current: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			enableScrolling: {
				type: Boolean,
				default: false
			},
			bounce: {
				type: Boolean,
				default: true
			},
			offsetAccuracy: {
				type: Number,
				default: 10
			},
			hidden: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			Util () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					bgColor: '#fff',
					//是否展示详情箭头
					arrowShow: true,
					//字体大小
					size: 30,
					//高度
					height: 80,
					//滑块类型
					type: 'line',
					//tab数量
					column: 'auto',
					//吸顶位置
					top: 0,
					padding: 32
				}, this.options)
			},
			touchProp () {
				return {
					current: this.currentSync
				}
			},
			// #ifdef APP-NVUE
			listHeight () {
				return this.windowHeight - Util.unitpixel(this.optionsSync.top)
			},
			scrollEvent () {
				return this.enableScrolling ? 'scroll' : 'unbindScroll'
			}
			// #endif
		},
		data () {
			return {
				currentSync: 0,
				windowHeight: 0,
				isShow: false
			}
		},
		mounted () {
			this.currentSync = this.current
			// #ifdef APP-NVUE
			this.$nextTick(function () {
				setTimeout(() => {
					this.refresh()
				}, 50)
			})
			// #endif
		},
		methods: {
			onTabsReady () {
				// #ifdef APP-NVUE
				if ( this.data.length > 0 ) {
					this.$nextTick(function () {
						setTimeout(() => {
							this.setSpecialEffects()
						}, 50)
					})
				}
				// #endif
			},
			setSpecialEffects () {
				// #ifdef APP-NVUE
				let childrens = Util.getChildrens('YbList,YbWaterfall', this)
				childrens.length > 0 && childrens[this.currentSync].setSpecialEffects({id:"yb-tab-list-scroller"});
				// #endif
			},
			onScroll (e) {
				this.$emit('scroll', {
					scrollTop: Math.abs(e.contentOffset.y),
					scrollHeight: e.contentSize.height,
					scrollWidth: e.contentSize.width
				})
			},
			onChange (e) {
				this.currentSync = e.current
				this.$emit('change', {
					current: this.currentSync
				})
				this.$emit('update:current', this.currentSync)
				this.$nextTick(function () {
					// #ifndef APP-NVUE
					uni.createSelectorQuery().in(this).select('.yb-tab-list').boundingClientRect(rect => {
						uni.createSelectorQuery().in(this).select('.yb-tab-list-content').boundingClientRect(rect2 => {
							let height = rect.height - rect2.height
							uni.pageScrollTo({
								scrollTop: Math.abs(rect.top) < height ? Math.abs(rect.top) : height,
								duration: 0,
								fail: (err) => {
									console.log(err);
								}
							})
						}).exec();
					}).exec();
					// #endif
					// #ifdef APP-NVUE
					setTimeout(() => {
						this.setSpecialEffects()
					}, 50)
					// #endif
					
				})
			},
			currentChange (value) {
				this.currentSync += value
				this.$emit('change', {
					current: this.currentSync
				})
				this.$emit('update:current', this.currentSync)
				this.$nextTick(function () {
					// #ifndef APP-NVUE
					uni.createSelectorQuery().in(this).select('.yb-tab-list').boundingClientRect(rect => {
						uni.createSelectorQuery().in(this).select('.yb-tab-list-content').boundingClientRect(rect2 => {
							let height = rect.height - rect2.height
							uni.pageScrollTo({
								scrollTop: Math.abs(rect.top) < height ? Math.abs(rect.top) : height,
								duration: 0,
								fail: (err) => {
									console.log(err);
								}
							})
						}).exec();
					}).exec();
					// #endif
					// #ifdef APP-NVUE
					setTimeout(() => {
						this.setSpecialEffects()
					}, 50)
					// #endif
					
				})
			},
			refresh () {
				// #ifdef APP-NVUE
				Util.getRect('#yb-tab-list-scroller', this.$refs.ybTabListScroller, this).then(res => {
					this.windowHeight = res.height
					this.$nextTick(function () {
						this.isShow = true
					})
				})
				// #endif
			}
		},
		watch: {
			// #ifdef APP-NVUE
			data (newVal) {
				if ( newVal.length > 0 ) {
					this.$nextTick(function () {
						setTimeout(() => {
							this.setSpecialEffects()
						}, 50)
					})
				}
			},
			current (newVal) {
				if ( newVal != this.currentSync ) {
					this.currentSync = newVal
				}
			}
			// #endif
		}
	}
</script>
<!-- #ifdef APP-VUE || H5 || MP-WEIXIN || MP-QQ -->
<!-- <script lang="wxs" module="touch" src="./modules/touch.wxs"></script> -->
<!-- #endif -->

<style scoped>
.yb-tab-list-content {
	position: relative;
	z-index: 1;
}
</style>